<script setup lang="ts">
import { ref } from 'vue'
import {useRouter} from 'vue-router'

const navList = ref([{
    name: '首页',
    key: 'home',
    path: '/home',
    icon: '<HomeFilled />'
}, {
    name: '进度',
    key: 'progress',
    path: '/progress'
}, {
    name: '我的',
    key: 'mine',
    path: '/mine'
}])

const router = useRouter()
const toPath = (item: any) => {
    router.push(item.path)
}
</script>

<template>
    <div class="nav">
        <div v-for="(item, index) in navList" :key="item.key" @click="toPath(item, index)" :class="{active: item.path === $route.path}" class="navInfo">
            <el-icon v-if="index === 0"><HomeFilled /></el-icon>
            <el-icon v-if="index === 1"><Tickets /></el-icon>
            <el-icon v-if="index === 2"><UserFilled /></el-icon>
            <span>{{ item.name }}</span>
        </div>
        
    </div>
</template>

<style scoped>
.nav{
  display: flex;
  justify-content: space-around;
    position: fixed;
    bottom: 0;
    height: 70px;
        align-items: center;
    background: #ffff;
    left: 0;
    right: 0;
    padding: 0 16px;
}
.nav .navInfo{
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
    color: #303741;
}
.navInfo .el-icon{
    margin-bottom: 1px;
    font-size: 24px;
    color: #404c89;
}
.nav .active{
    color: #2863FD;
}
.nav .active .el-icon{
    color: #2863FD;
}
</style>
